<template>
    <view class="pub_page pub_good_info pub_page_bg pub_header_padding">
        <pub-head headerName="good_info" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll good_info_box" v-if="goodInfo != ''">
            <div class="banner_div">
                <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000" v-cloak:indicator-dots="false">
                    <swiper-item v-for="(item, key) in goodInfo.goodsCarousel" :key="key">
                        <view class="swiper_item" :style="{ backgroundImage: 'url(' + item + ')' }"></view>
                    </swiper-item>
                </swiper>
            </div>
            <div class="info_div">
                <!-- <div class="price" v-if="orderType == 3"> <span class="p">{{ goodInfo.sellPrice }}</span> 兑换券</div> -->
                <div class="price">￥ <span class="p">{{ goodInfo.sellPrice }}</span></div>
                <div class="oth">
                    <div class="txt_1">积分：{{goodInfo.integral}}</div>
                    <div class="txt_2">库存：{{goodInfo.stock}}</div>
                </div>
                <div class="title">{{ goodInfo.goodsName }}</div>
                <div class="text" v-if="!isCrystalGoods">{{ goodInfo.content }}</div>
            </div>
            <div class="detail_div" v-if="isCrystalGoods">
                <div class="title">商品详情</div>
                <br>
                <rich-text class="detail_box" :nodes="goodInfo.description"></rich-text>
            </div>
            <div class="detail_div" v-else>
                <div class="title">商品详情</div>
                <br>
                <img class="imgs" :src="li" v-for="(li, key) in goodInfo.goodsDetail" :key="key" />
            </div>
            <div class="bottom_div">
                <div class="pub_btn" v-if="isCrystalGoods && allowBuy" @click="skuDeal('open')">立即购买</div>
                <div class="pub_btn pub_btn_no" v-else-if="isCrystalGoods && !allowBuy">暂无法购买</div>
                <!-- <div class="pub_btn" v-else-if="orderType == 3" @click="toGoodOrder">立即兑换</div>
                <div class="pub_btn" v-else-if="orderType == 2" @click="toGoodOrder">立即换购</div> -->
                <div class="pub_btn" v-else @click="toGoodOrder">立即购买</div>
            </div>
        </div>
        <div class="good_info_box" v-if="loadFinish && goodInfo == ''">
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="pub_nodata_1">当前商品已被删除或下架~</div>
        </div>

        <div class="sku_alert_div" v-if="skuInfo.show">
            <div class="box">
                <div class="title">请选择规格 <span class="close icon-font-basic icon-b-off-1" @click="skuDeal('close')"></span>
                </div>
                <div class="info">
                    <pub-image class="img" :src="skuInfo.cover"></pub-image>
                    <div class="text">
                        <div class="p_1">{{ skuInfo.goodsName }}</div>
                        <div class="p_2">
                            <span class="span_0">￥</span>
                            <span class="span_1">{{ skuInfo.sellPrice }}</span>
                            <span class="span_3">积分：{{ skuInfo.integral }}</span>
                            <span class="span_2">库存：{{ skuInfo.stock }}</span>
                        </div>
                    </div>
                </div>
                <div class="sku_lists">
                    <div class="sku_li" :class="li.skuId == skuInfo.skuId ? 'sku_li_active' : ''" v-for="(li, key) in goodInfo.skuInfoList" :key="key" @click="skuDeal('sku_click', li)">{{
                        li.goodsName }}
                    </div>
                </div>
                <br>
                <div class="pub_btn pub_btn_no" v-if="skuInfo.status !== '1'">暂无法购买</div>
                <div class="pub_btn pub_btn_no" v-else-if="!(skuInfo.stock > 0)">抱歉，暂无库存</div>
                <div class="pub_btn" v-else @click="toGoodOrder">确认购买</div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '商品详情',//标题栏内容
                left_type: 3,
                header_color: 'rgba(0,0,0,0)'
            },
            orderType: '',//参考  this.$constant.orderType

            id: '',//

            // 供应链商品有值
            spuId: '',
            skuInfo: {
                show: false,
                skuId: '',
                skuName: '',
                goodsName: '',
                cover: '',
                salePrice: '',
                stock: '',
                integral: '',
                status: ''
            },

            goodInfo: '',
            loadFinish: false
        };
    },
    computed: {
        // 供应链商品
        isCrystalGoods() {
            return this.orderType === this.$constant.orderType.crystalGoods
        },
        // 是否允许购买
        allowBuy() {
            if (this.isCrystalGoods) {
                return this.goodInfo.status === '1'
            }
            return true
        }
    },
    onLoad(option) {
        // console.log(option);
        this.orderType = Number(option.orderType || 0);

        this.id = option.id || '';
        this.spuId = option.spuId || '';

        if (this.id) {
            this.getGoodInfo(this.id);
        }
        if (this.spuId && this.isCrystalGoods) {
            this.getCrystalGoodInfo();
        }
    },
    methods: {
        async getGoodInfo(id) {
            this.$comFun.openLoading();
            const res = await this.$request.get('goods/getGoodsInfo', {
                id: id
            });
            this.$comFun.closeLoading();
            // console.log(res);
            this.loadFinish = true;
            if (res.code == 200 && res.result) {
                res.result.goodsDetail = res.result.goodsDetail ? res.result.goodsDetail.split(",") : [];
                res.result.goodsCarousel = res.result.goodsCarousel ? res.result.goodsCarousel.split(",") : [res.result.coverImg];
                this.goodInfo = res.result;
                this.$forceUpdate();
            }
        },
        // 获取供应链商品信息
        async getCrystalGoodInfo() {
            this.$comFun.openLoading();
            const res_open = await this.$request.get('goods/getCrystalGoodsInfo', {
                spuId: this.spuId
            });
            this.$comFun.closeLoading();
            // console.log(res);
            this.loadFinish = true;
            if (res_open.code == 200 && res_open.result.skuInfoList.length > 0) {
                let richText = '';
                if (res_open.result.description.slice(0, 1) == '<') {
                    richText = res_open.result.description;
                } else {
                    try {
                        richText = JSON.parse(res_open.result.description);
                        let arr = richText.map(li => {
                            return `<img src='${li}'  width='100%' />`
                        })
                        richText = arr.join(" ");
                    } catch (error) {
                        richText = `<img src='${res_open.result.cover}'  width='100%' />`;
                    }
                }
                // console.log(111, richText);
                var pattern = /^(http:\/\/|https:\/\/)/; // 定义正则表达式
                if (!pattern.test(res_open.result.cover)) {
                    res_open.result.cover = "http:" + res_open.result.cover;
                }

                this.goodInfo = {
                    goodsName: res_open.result.goodsName,
                    cover: res_open.result.cover,
                    goodsCarousel: [res_open.result.cover],
                    description: richText,
                    sellPrice: res_open.result.salePrice,
                    stock: res_open.result.stock,
                    integral: res_open.result.integral,
                    status: res_open.result.status,
                    skuInfoList: res_open.result.skuInfoList,
                }
                // console.log(this.goodInfo);
            }
        },
        skuDeal(type, data_1) {
            switch (type) {
                case 'open':
                    this.skuInfo = {
                        show: true,
                        skuId: this.goodInfo.skuInfoList[0].skuId,
                        skuName: this.goodInfo.skuInfoList[0].goodsName,
                        goodsName: this.goodInfo.goodsName,
                        cover: this.goodInfo.skuInfoList[0].cover || this.goodInfo.cover,
                        sellPrice: this.goodInfo.skuInfoList[0].salePrice,
                        stock: this.goodInfo.skuInfoList[0].stock,
                        integral: this.goodInfo.skuInfoList[0].integral,
                        status: this.goodInfo.skuInfoList[0].status
                    };
                    break;
                case 'close':
                    this.skuInfo = this.$options.data().skuInfo;
                    
                    break;
                case 'sku_click':
                    this.skuInfo.skuId = data_1.skuId;
                    this.skuInfo.skuName = data_1.goodsName;
                    this.skuInfo.cover = data_1.cover || this.goodInfo.cover;
                    this.skuInfo.sellPrice = data_1.salePrice;
                    this.skuInfo.stock = data_1.stock;
                    this.skuInfo.integral = data_1.integral;
                    this.skuInfo.status = data_1.status;
                    this.$forceUpdate();
                    break;
                default:
                    break;
            }
        },
        toGoodOrder() {
            let goodInfo = {};
            if (this.isCrystalGoods) {
                if (this.skuInfo.skuId == '') {
                    this.$comFun.toast('请选择规格');
                    return;
                }
                goodInfo = {
                    coverImg: this.skuInfo.cover,
                    goodsName: this.skuInfo.goodsName,
                    sellPrice: this.skuInfo.sellPrice,
                    skuId: this.skuInfo.skuId,
                    skuName: this.skuInfo.skuName,
                    spuId: this.spuId,
                    stock: this.skuInfo.stock,
                }
                this.skuDeal('close');
            } else {
                goodInfo = {
                    coverImg: this.goodInfo.coverImg,
                    goodsName: this.goodInfo.goodsName,
                    sellPrice: this.goodInfo.sellPrice,
                    id: this.goodInfo.id,
                    skuId: this.goodInfo.id,
                    spuId: this.goodInfo.id,
                    stock: 0,
                }
            }
            this.$comFun.openWin('/pages/index/good_order', {
                orderType: this.orderType,
                goodInfo: JSON.stringify(goodInfo),
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.pub_good_info {
    min-height: 100vh;

    .good_info_box {
        padding: 0 0 160rpx 0;
        background: #f1f2f6;

        .banner_div {
            width: 100vw;
            // border-radius: 10rpx;
            margin: 0 auto 30rpx auto;

            .swiper {
                width: 100vw;
                height: 100vw;
                border-radius: 10rpx;
            }

            .swiper_item {
                width: 100vw;
                height: 100vw;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                // border-radius: 10rpx;
            }

            ::v-deep uni-swiper .uni-swiper-dot {
                background-color: rgba(0, 0, 0, 0.3);
            }

            ::v-deep uni-swiper .uni-swiper-dot-active {
                background-color: #fff;
            }
        }

        .info_div {
            width: 100vw;
            background-color: #fff;
            margin: 0 auto;
            padding: 40rpx 30rpx;
            position: relative;
            border-radius: 10rpx;
            // border-bottom: 20rpx solid #ebebeb;

            .title {
                font-size: 28rpx;
                color: #333333;
                line-height: 40rpx;
                font-weight: bold;
                margin: 20rpx 0;
            }

            .price {
                color: #f12026;
                font-weight: bold;
                font-size: 30rpx;
                line-height: 40rpx;

                .p {
                    font-size: 36rpx;
                }

                .jf {
                    font-size: 24rpx;
                    color: #aaa;
                    padding: 0 0 0 6rpx;
                    line-height: 40rpx;
                    display: inline-block;
                    vertical-align: bottom;
                }
            }

            .text {
                font-size: 24rpx;
                color: #333333;
                line-height: 40rpx;
            }

            .oth {
                display: flex;
                justify-content: space-between;
                margin-top: 10rpx;
                .txt_1 {
                    color: #f56715;
                    font-size: 28rpx;
                    line-height: 40rpx;
                }
                .txt_2 {
                    color: #999;
                    font-size: 24rpx;
                    line-height: 40rpx;
                }
            }
        }

        .detail_div {
            background-color: #fff;
            margin-top: 30rpx;

            .title {
                width: 100%;
                text-align: center;
                font-size: 32rpx;
                color: #333333;
                font-weight: bold;
                // background: url("@/static/aimg/img_72.png") bottom center no-repeat;
                background-size: auto 14rpx;
                padding: 40rpx 0 20rpx 0;
            }

            .imgs {
                width: 100vw;
                height: auto;
                display: block;
            }

            .detail_box {
                width: 100vw;
                color: #fff !important;

                ::v-deep img {
                    width: 100vw;
                    height: auto;
                    display: block;
                    margin: 0 auto;
                }
            }
        }

        .detail_div_nomargin {
            margin-top: 0;
        }

        .bottom_div {
            width: 100%;
            height: 160rpx;
            background-color: #fff;
            position: fixed;
            bottom: 0;
            left: 0;
            padding: 25rpx 30rpx;
            box-shadow: 0 -6rpx 16rpx 2rpx rgba(0, 0, 0, 0.1);

            .pub_btn {
                height: 110rpx;
                line-height: 110rpx;
            }
        }
    }

    .sku_alert_div {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.55);
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1000001;

        .box {
            width: 100vw;
            background-image: linear-gradient(#e02e22 10%, #fff 90%);
            border-top-left-radius: 40rpx;
            border-top-right-radius: 40rpx;
            padding: 20rpx 30rpx 50rpx 30rpx;
            position: absolute;
            bottom: 0;
            left: 0;

            .title {
                line-height: 100rpx;
                text-align: center;
                font-size: 32rpx;
                font-weight: bold;
                color: #fff;
                position: relative;
                margin-bottom: 40rpx;

                .close {
                    width: 100rpx;
                    height: 100rpx;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }

            .info {
                width: 100%;
                position: relative;
                height: 180rpx;
                padding: 0 0 0 210rpx;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                margin-bottom: 50rpx;

                .img {
                    width: 180rpx;
                    height: 180rpx;
                    position: absolute;
                    left: 0;
                    top: 0;
                    border-radius: 13rpx;
                    overflow: hidden;
                }

                .text {
                    width: 100%;

                    .p_1 {
                        font-size: 32rpx;
                        color: #ffffff;
                        line-height: 40rpx;
                        max-height: 80rpx;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }

                    .p_2 {
                        font-size: 24rpx;
                        color: #ddd;
                        line-height: 40rpx;
                        height: 40rpx;
                        margin-top: 20rpx;

                        .span_0 {
                            font-size: 24rpx;
                            color: #ffdd86;
                            line-height: 40rpx;
                        }

                        .span_1 {
                            font-size: 36rpx;
                            font-weight: bold;
                            padding: 0 6rpx 0 0;
                            color: #ffdd86;
                            line-height: 40rpx;
                        }

                        .span_2 {
                            float: right;
                            line-height: 40rpx;
                        }

                        .span_3 {
                            font-size: 20rpx;
                            color: #333;
                            height: 40rpx;
                            line-height: 40rpx;
                            background-color: #ffdd86;
                            border-radius: 10rpx;
                            padding: 0 8rpx;
                            margin: 0 0 0 10rpx;
                        }
                    }
                }
            }

            .sku_lists {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                min-height: 30vh;
                max-height: 40vh;
                overflow-y: scroll;
                align-content: flex-start;

                .sku_li {
                    height: 60rpx;
                    line-height: 60rpx;
                    color: #333;
                    font-size: 24rpx;
                    padding: 0 30rpx;
                    margin: 0 30rpx 30rpx 0;
                    border-radius: 30rpx;
                    background-color: #fff;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .sku_li_active {
                    background-image: linear-gradient(
                        to top right,
                        #e02e22,
                        rgb(244, 218, 218)
                    );
                    color: #fff;
                }
            }
        }
    }
}
</style>
